<template>
  <div class="shdxq">
    <el-button type="primary" @click="goToBack">返回</el-button>
    <el-button type="primary" @click="deliverGoods"
      v-show="orderDetail.typeId == 2 && orderDetail.status == 108">发货</el-button>
    <!-- 订单状态信息 -->
    <el-card class="box-card">
      <a class="shu"></a> 订单状态信息
      <div style="display: flex;  padding-top:2vh">
        <div style="flex: 1;">
          主订单编号:
          <a style="padding-left: 6px; margin-right: 10px;"> {{ orderDetail.orderNum }}</a>
        </div>

        <div style="flex: 1;">
          <a style="margin-right: 10px;">订单状态：{{ orderDetail.stateName }}</a>
        </div>
      </div>

      <div style="display: flex;  padding-top:2vh">
        <div style="flex: 1;">
          <!-- 物流步骤条 -->
          <el-steps :space="200" :active="getActiveNum(orderDetail.status)" finish-status="success"
            v-show="orderDetail.typeId == 2">
            <el-step title="提交订单"></el-step>
            <el-step title="待付款"></el-step>
            <el-step title="待发货"></el-step>
            <el-step title="待收货"></el-step>
            <el-step title="交易完成"></el-step>
          </el-steps>

          <!-- 即开类步骤条 -->
          <el-steps :space="200" :active="getActiveNum(orderDetail.status)" finish-status="success"
            v-show="orderDetail.typeId == 1">
            <el-step title="待支付"></el-step>
            <el-step title="办理中"></el-step>
            <el-step title="办理成功"></el-step>
          </el-steps>

          <!-- 施工类步骤条 -->
          <el-steps :space="200" :active="getActiveNum(orderDetail.status)" finish-status="success"
            v-show="orderDetail.typeId == 3">
            <el-step title="待提交"></el-step>
            <el-step title="受理成功"></el-step>
            <el-step title="已竣工"></el-step>
          </el-steps>

          <!-- 签约类步骤条 -->
          <el-steps :space="200" :active="getActiveNum(orderDetail.status)" finish-status="success"
            v-show="orderDetail.typeId == 4">
            <el-step title="待签约"></el-step>
            <el-step title="待订购"></el-step>
            <el-step title="待上传成员"></el-step>
            <el-step title="待添加成员"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
        </div>
      </div>
    </el-card>

    <!-- 物流类订单 -->
    <!-- 收货人信息 -->
    <el-card class="box-card" style="margin-top:3vh" v-show="orderDetail.typeId == 2">
      <a class="shu"></a> 收货人信息
      <div style="display: flex;  padding-top:2vh">
        <div style="flex: 1;">
          收货人信息:
          <a style="padding-left: 6px; margin-right: 10px;"> {{ orderDetail.receiver }}</a>
        </div>

        <div style="flex: 1;">
          <a style="margin-right: 10px;">手机号码：{{ orderDetail.receiverPhone }}</a>
        </div>

        <div style="flex: 1;">
          <a style="margin-right: 10px;">收货地址：{{ orderDetail.province }} {{ orderDetail.place }} {{ orderDetail.area }}
            {{ orderDetail.addr }}</a>
        </div>
      </div>
    </el-card>

    <!-- 施工类订单 -->
    <!-- 客户信息 -->
    <el-card class="box-card" style="margin-top:3vh" v-show="orderDetail.typeId == 3">
      <a class="shu"></a> 客户信息
      <div style="display: flex;  padding-top:2vh">
        <div style="flex: 1;">
          受理号码:
          <a style="padding-left: 6px; margin-right: 10px;"> {{ orderDetail.broadbandId }}</a>
        </div>

        <div style="flex: 1;">
          <a style="margin-right: 10px;">客户名称：{{ orderDetail.userName }}</a>
        </div>

        <div style="flex: 1;">
          <a style="margin-right: 10px;">联系人：{{ orderDetail.userName }}</a>
        </div>

        <div style="flex: 1;">
          <a style="margin-right: 10px;">联系电话：{{ orderDetail.userPhone }}</a>
        </div>
      </div>
    </el-card>

    <!-- 签约类订单 -->
    <!-- 客户信息 -->
    <el-card class="box-card" style="margin-top:3vh" v-show="orderDetail.typeId == 4">
      <a class="shu"></a> 集团客户信息
      <div style="display: flex;  padding-top:2vh">
        <div style="flex: 1;">
          集团客户编码:
          <a style="padding-left: 6px; margin-right: 10px;"> {{ 123 }}</a>
        </div>

        <div style="flex: 1;">
          <a style="margin-right: 10px;">集团客户名称：{{ 123 }}</a>
        </div>

        <div style="flex: 1;">
          <a style="margin-right: 10px;">所属城市：{{ 123 }}</a>
        </div>

        <div style="flex: 1;">
          <a style="margin-right: 10px;">联系电话：{{ 123 }}</a>
        </div>
      </div>

      <div style="display: flex;  padding-top:2vh">
        <div style="flex: 1;">
          客户经理姓名：
          <a style="padding-left: 6px; margin-right: 10px;">{{ 123 }}</a>
        </div>

        <div style="flex: 1;">
          <a style="margin-right: 10px;">客户经理电话：{{ 123 }}</a>
        </div>

        <div style="flex: 1;">
          <a style="margin-right: 10px;">客户经理工号：{{ 123 }}</a>
        </div>
      </div>
    </el-card>

    <el-card class="box-card" style="margin-top:3vh">
      <a class="shu"></a> 支付信息
      <div style="display: flex;  padding-top:2vh">
        <div style="flex: 0.25;">
          支付方式:
          <a style="padding-left: 6px; margin-right: 10px;">{{ getPayName(orderDetail.orderPayId) }}</a>
        </div>
        <div style="flex: 0.25;">
          <a style="margin-right: 10px;">支付状态: {{ this.orderDetail.orderStatus == 4 ? "已支付" :
            this.orderDetail.orderStatus == 5 ? "已取消" : "其他" }}</a>
        </div>

        <div style="flex: 0.25;">
          <a style="margin-right: 10px;">支付金额: {{ orderDetail.payPrice }}</a>
        </div>
      </div>
    </el-card>

    <div v-for="id in orderDetail.idStringList" :key="id">
      <el-button type="primary" @click="goToChild(id)">订单：{{ id }}</el-button>
    </div>
    <!-- <router-view></router-view> -->
    <!-- <el-tabs v-model="editableTabsValue" type="card" @tab-click="handleTabClick">
      <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
        <router-view :key="item.title"></router-view>
      </el-tab-pane>
    </el-tabs> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 主订单id
      orderNum: "",
      orderDetail: {
        stateName: "已支付",
        typeId: 4,
        status: 1,
        receiver: "张三",
        receiverPhone: "18912345678",
        province: "江苏",
        place: "南京",
        area: "栖霞区",
        addr: "花园城",
        orderPayId: 1,
        payPrice: 1000,
        broadbandId: 1,
        userName: "张三",
        userPhone: "18912345678",
        idList: [],
        idStringList: []
      },
      // 默认选择的标签名字
      editableTabsValue: '',
      // 标签页数组
      editableTabs: [
        // {
        //   title: "订单管理",
        //   name: "订单管理",
        //   path: "/OrderManager"
        // },
      ],
      tabIndex: 0,
      // 前一个标签页名字
      preTab: "",
    }
  },
  methods: {
    deliverGoods() {
      this.$axios.post("api/staffOrder/payAddExpress/" + this.orderNum).then(response => {
        if (response.data.code == 200) {
          this.$message.success("发货成功");
          this.queryOrderDetail();
        } else {
          this.$message.error(response.data.data);
        }
      })
    },
    goToChild(id) {
      console.log("跳往子订单页")
      localStorage.setItem("masterOrderNum", this.orderNum + '')
      this.$router.push({ path: "/OrderChild", query: { "orderNum": id } });
    },
    getActiveNum(state) {
      switch (state) {
        case 101:
          return 1
        case 108:
          return 2
        case 109:
          return 3
        case 110:
          return 4
        case 1:
          return 0
        case 2:
          return 1
        case 4:
          return 3
        case 201:
          return 1
        case 204:
          return 2
        case 207:
          return 3
        case 301:
          return 1
        case 303:
          return 2
        case 304:
          return 3
        case 305:
          return 4
        case 306:
          return 5
        default:
          return null
      }
    },
    // 获取支付方式名字
    getPayName(id) {
      switch (id) {
        case 0:
          return "银联"
        case 1:
          return "支付宝"
        case 2:
          return "微信"
        default:
          return "未知"
      }
    },
    queryOrderDetail() {
      // 根据订单id查子菜单 默认显示第一个子菜单
      this.$axios.get("/api/staffOrder/queryOrderByOrderNum/" + this.orderNum).then(response => {
        let resp = response.data
        if (resp.code == 200) {
          this.orderDetail = resp.data
          // // 添加标签页
          // this.orderDetail.idList.forEach(id => {
          //   let idStr = id + '';
          //   this.addTab(idStr, idStr, "/OrderChild");

          //   this.tabIndex++;
          // })

          // // 切换标签页
          // this.changeTab(this.editableTabs[0].name, this.editableTabs[0].path)
        }
      })
    },

    // 添加标签页
    addTab(tabTitle, name, path) {
      // 判断标签页是否已经在数组，不存在则添加
      let isExist = false;
      this.editableTabs.forEach(item => {
        if (item.name == name) {
          isExist = true;
        }
      })
      if (!isExist) {
        this.tabIndex++;
        this.editableTabs.push({ "title": tabTitle, "name": name, "path": path });
      }
    },

    // 点击标签页获取订单号
    handleTabClick(tab) {
      // 获取点击的标签页对应的 item 对象
      let clickedItem = this.editableTabs.find(item => item.name === tab.name);
      // 从 clickedItem 中获取属性

      if (clickedItem && clickedItem.name != this.preTab) {
        this.preTab = tab.name;
        this.changeTab(clickedItem.name, clickedItem.path);
        // 通过 clickedItem.propertyName 获取对应属性值
      }
    },

    // 切换标签页
    changeTab(name, path) {
      // 切换当前标签页
      this.editableTabsValue = name;
      this.$router.push({ path: path, query: { "orderNum": name } });
    },

    goToBack() {
      this.$router.go(-1)
    }
  },
  created() {
    // 主订单id
    this.orderNum = this.$route.query.orderNum
    this.queryOrderDetail();
  },

  mounted() {
  }
}
</script>

<style scoped>
.shu {
  position: absolute;
  left: -0.3px;
  color: rgb(0, 149, 255);
  background-color: rgb(0, 149, 255);
  height: 30px;
  width: 8px;
}
</style>